<template>
	<viwe class="hello">
		<u-form>
			<viwe class="ad-form">第{{ index + 1 }}项:</viwe>
			<u-form-item>
				<viwe class="childpage">
					<p>内容:</p>
					<viwe class="ad-input"><u--input placeholder="请输入详细内容" border="surround" v-model="invoice.content"></u--input></viwe>
				</viwe>
			</u-form-item>
			<u-form-item>
				<viwe class="childpage">
					<p>单价:</p>
					<viwe class="ad-input"><u--input placeholder="请输入单价" border="surround" v-model="invoice.price"></u--input></viwe>
				</viwe>
			</u-form-item>
			<u-form-item>
				<viwe class="childpage">
					<p>数量:</p>
					<viwe class="ad-input"><u--input placeholder="请输入数量" border="surround" v-model="invoice.num"></u--input></viwe>
				</viwe>
			</u-form-item>
			<u-form-item>
				<viwe class="childpage">
					<p>单位:</p>
					<viwe class="ad-input"><u--input placeholder="请输入单位" border="surround" v-model="invoice.unit"></u--input></viwe>
				</viwe>
			</u-form-item>
			<u-form-item>
				<viwe class="childpage">
					<p>规格:</p>
					<viwe class="ad-input"><u--input placeholder="请输入规格" border="surround" v-model="invoice.specifications"></u--input></viwe>
				</viwe>
			</u-form-item>
		</u-form>
		<div class="ad-button"><u-button type="error" text="删除本项" @click="deleteStudent"></u-button></div>
	</viwe>
</template>

<script>
export default {
	props: {
		index: {
			type: Number,
			required: true
		},
		items: {
			type: Array,
			default: Array
		}
	},
	data() {
		return {
			invoice: {
				content: '',
				price: '',
				num: '',
				unit: '',
				specifications: ''
			}
		};
	},
	watch: {
		invoice: {
			handler(newV, oldV) {
				this.$emit('uploadData', { index: this.index, data: newV });
			},
			deep: true
		},
		items: {
			handler(newV, oldV) {
				if (newV.length !== 0) {
					this.invoice = { ...newV[this.index] };
				}
			},
			deep: true
		}
	},
	methods: {
		deleteStudent: function() {
			this.$emit('deleteIndex', this.index);
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #e1e5eb;
	}
.childpage {
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.ad-input {
	width: 80%;
	margin-left: 10px;
	background-color: #ffffff;
	border-radius: 5px;
}
.ad-form{
	font-size: 20px;
	padding: 10px;
}
.ad-button{
	margin: 10px;
}
</style>
